<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!-- meta:vo viewport -->
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,
    width=device-width,initial-scale=1.0" />
    <!-- meta:compat：修改IE7为edge -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="Demo for a tutorial on how to create shaded CSS-only progress bars with Sass" />
    <meta name="keywords" content="css progress, sass, progress bar, tutorial, css-only, mixin" />
    <meta name="author" content="Rafael González for Codrops" />

    <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon"/>
    <!-- 弃用bootstrap -->

    <link rel="stylesheet" href="css/air-portal.css">

    <!-- 进度条 -->
    <link rel="stylesheet" type="text/css" href="lib/progress-bar/css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="lib/progress-bar/fonts/font-awesome-4.3.0/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="lib/progress-bar/css/demo.css" />
    <link rel="stylesheet" type="text/css" href="lib/progress-bar/css/component.css" />
    <link rel="stylesheet" type="text/css" href="lib/progress-bar/css/custom-bars.css" />

    <link rel="stylesheet" href="lib/input-word-splashing/css/style.css">

    <link rel="stylesheet" type="text/css" href="lib/btn/css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="lib/btn/css/vicons-font.css" />
    <link rel="stylesheet" type="text/css" href="lib/btn/css/base.css" />
    <link rel="stylesheet" type="text/css" href="lib/btn/css/buttons.css" />

    <link rel="stylesheet" href="lib/jquery-reveal/reveal.css">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="lib/simple-alert/dist/notyf.min.css">

    <script type="text/javascript" src="lib/jquery-reveal/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="lib/jquery-reveal/jquery.reveal.js"></script>
    <style type="text/css">
        .big-link { display:block; margin-top: 100px; text-align: center; font-size: 70px; color: #06f; }

    </style>
    <!--[if IE]>
    <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->

    <title>air-portal</title>
</head>
<body>
    <!-- 整体在my-container中 -->
    <div id="my-container">
        <!--<header>HEADER</header>-->
        <!--main开始-->
        <div id="main">

            <!--发送之前：logo和发送图标的展示(send and receive)-->
            <div id="sendBefore" style="display: block;" class="front">
                <div class="logoBox"></div>
                <div class="mainBox">
                    <!-- id="i-check" -->
                    <button id="send" class="btnMain" onclick="$('#i-file').click();">发送</button>

                    <br>
                    <button id="receive" class="btnMain">接收</button>
                </div>
            </div>
            <!--发送之前结束-->

            <!--发送中展示进度条(sending)-->
            <div id="sending" style="display: none;" class="back"><!--class="back"-->
                <div class="logoBox-area">
                    <div class="backUp" style="cursor: pointer; line-height: 40px;">
                        <img src="./img/arrow.png" alt="" style="height: 35px; width: 45px; margin-left: -12px;">
                        <span style="vertical-align: 25%;font-size:16px;font-family: 微软雅黑,宋体,Arial,Helvetica,Verdana,sans-serif;font-weight:bold;">BACK UP</span><!-- BACK TO INDEX PAGE / 返回首页 -->
                    </div>
                    <hr class="split-hr-sending">
                    <br>

                    <div class="flexy-column">
                        <div class="progress-factor flexy-item">
                            <div class="progress-bar">                                                       <!-- now -->
                                <div class="bar has-rotation has-colors navy ruler" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" id="progressBar">
                                    <div class="tooltip white"></div>
                                    <div class="bar-face face-position roof percentage"></div>
                                    <div class="bar-face face-position back percentage"></div>
                                    <div class="bar-face face-position floor percentage volume-lights"></div>
                                    <div class="bar-face face-position left"></div>
                                    <div class="bar-face face-position right"></div>
                                    <div class="bar-face face-position front percentage volume-lights shine"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 显示上传速度 -->
                    <div id="showInfo" style="margin-top: 32px;text-align: center;font-family: fantasy;">399KB/s<br><br>12min&ensp;23s</div>
                    <!-- 上传相关的 -->
                    <!--<input id='file_name' class="file_loc file_name_input" style="margin-top: 20px;" disabled>-->
                    <input class="file_name file_name_input" style="margin-top: 20px;" disabled>
                    <input type="file" name="file" id='i-file' onchange="$('.file_name').val(getCaption($('#i-file').val()));"
                           style="display: none">
                </div>
            </div>
            <!--发送中结束-->

            <!-- 接收中(reception) -->
            <div id="reception" style="display: none;">
                <a id="fileURIInfo" href="/system/2019/2/11/22cbce7e-c5fe-4a4d-8ab6-c66d85d17707.pdf" download="mzywucai.png"
                   style="display: none"></a>
                <div class="logoBox"></div>
                <div class="reception-mainBox">
<!--

                    <div class="backUp" style="cursor: pointer; line-height: 40px;">
                        <img src="./img/arrow.png" alt="" style="height: 35px; width: 45px; margin-left: -182px;"> &lt;!&ndash; -145px  -238px &ndash;&gt;
                        <span style="vertical-align: 25%;font-size:16px;font-family: 微软雅黑,宋体,Arial,Helvetica,Verdana,sans-serif;font-weight:bold;">BACK TO INDEX</span>

                    </div>
-->

                    <div class="backUp" style="cursor: pointer; line-height: 40px;"><!-- -245px -->
                        <img src="./img/arrow.png" alt="" style="height: 35px; width: 45px; margin-left: -245px;"> <!-- -145px  -238px -->
                        <!-- <span style="vertical-align: 25%;font-size:16px;font-family: 微软雅黑,宋体,Arial,Helvetica,Verdana,sans-serif;font-weight:bold;">BACK TO INDEX</span> -->
                        <span style="vertical-align: 25%;font-size:16px;font-family: 微软雅黑,宋体,Arial,Helvetica,Verdana,sans-serif;font-weight:bold;">BACK UP</span><!-- BACK UP / 返回首页 -->

                    </div>


                    <!--<hr class="split-hr-reception">-->
                        <div style="width: 358px;background-color: #444444;height: 2px;margin: 0 auto;"></div>

                    <br>

                    <div class="flex_container">

                        <form>
                            <div class="input_wrap">
                                <!-- type="number" -->
                                <input id="fileCodeInput" class="receive-input" placeholder="请输入取件码" onkeydown="onlyNum();" onkeyup="getFile();" style="ime-mode:Disabled" maxlength="6"/>
                                <!--<input type="text" placeholder="请输入取件码" onkeyup="javascript:checkFileCodeLen(this)" onmousedown="javascript:checkFileCodeLen(this)" />--> <!-- Please enter code -->
                                <div class="after"></div>
                            </div>
                        </form>
                    </div>
                    <!--<input class="command-input" type="text" placeholder="Please enter the file pass"/>-->
                    <!--<button class="confirm">确认</button>-->
                </div>
            </div>
            <!-- 接收中(reception)结束 -->

            <!--隐藏的选项卡-->
            <span id="my-menuIcon"></span>
            <div id="my-mask"></div>
            <div id="my-menu">
                <a class="my-menuItem" id="menuItemLogin" style="text-decoration:none;">登录</a>
                <a class="my-menuItem" id="menuItemLogout" style="text-decoration:none;">退出</a>
                <span class="my-menuLine" id="menuLine0"></span>

                <a class="my-menuItem" id="menuItemSettings" style="text-decoration:none;">设置</a>
                <a class="my-menuItem" id="menuItemRecentCode" style="text-decoration:none;">上传缓存</a>
                <!--<a class="my-menuItem" id="menuItemFeedback" style="text-decoration:none;">获取帮助</a>-->
            </div>
            <!--隐藏的选项卡结束-->

        </div>
        <!--main结束-->

        <!-- footer 部分 -->
        <footer id="footer">
            <div id="default">
                <div id="displayBlog" class="shrink-button">
                    <img src="img/up.png" class="shrink-button-image" alt="" />
                    <!--<span class="arrow-up"></span>-->
                </div>
                <span style="font-family: 华文行楷">以身为棋，胜天半子。</span>
            </div>

            <div id="blog">
                <div id="hideBlog" class="shrink-button">
                    <img src="img/down.png" class="shrink-button-image" alt="" />
                    <!--<span class="arrow-down"></span>-->
                </div>
                <span>blog.mzywucai.club</span>
            </div>
        </footer>
        <!-- footer结束 -->

        <!-- class="big-link" style="display: none;" -->
        <a href="#" id="infoModalLink" data-reveal-id="infoModal" style="display: none"></a>
        <a href="#" id="codeModalLink" data-reveal-id="codeModal" style="display: none"></a>
        <a href="#" id="finishModalLink" data-reveal-id="finishModal" style="display: none"></a>
        <a href="#" id="recentModalLink" data-reveal-id="recentModal" style="display: none"></a>




        <div id="infoModal" class="reveal-modal">
            <h3>AIR-PORTAL-CONFIRM</h3>
            <br>
            <hr>
            <a class="close-reveal-modal" id="infoModalClose">&#215;</a>
            <div style="padding-top: 5px;">
                <h4>文件参数</h4>
                <span>文件名称：&emsp;&emsp;</span> <input class="file_name" type="text" value="Ubuntu-Mono.zip" style="width: 60%;text-align: center;height: 35px;margin-top: 5px;" disabled> <br/>
                <span>文件类型：&emsp;&emsp;</span> <input class="file_type" type="text" value="application/pdf" style="width: 60%;text-align: center;height: 35px;margin-top: 5px;" disabled> <br/>
                <span>文件大小：&emsp;&emsp;</span> <input class="file_size" type="text" value="24MB" style="width: 60%;text-align: center;height: 35px;margin-top: 5px;" disabled> <br/>
                <br>
                <h4>可选设置</h4>
                <span>设置文件密码：</span> <input id="file_pass" type="text" placeholder="选填" value="" maxlength="16" style="width: 60%;text-align: center;font-family: Consolas;height: 35px;margin-top: 5px;"> <br/>
                <span>限制下载次数：</span> <input id="file_times" type="number" placeholder="" value="10" min="1" style="width: 15%;text-align: center;height: 35px;margin-top: 5px;"> <br/>
            </div>

            <!--
            <input type="button" value="上传" style="height: 35px;width: 55px;">
            <input type="button" value="取消" style="height: 35px;width: 55px;">
            -->
            <button id="upload" class="button button--winona button--border-thin button--round-s" style="height: 40px;margin-left: 220px;">上传</button>
            <button id="cancelUpload" class="button button--winona button--border-thin button--round-s" style="height: 40px;margin-left: -8px;">取消</button>

            <br>
            <div style="clear:both "></div>
            <hr>
            <p style="font-size: 12px;">
                当设置密码后，在接收文件时，需要输入文件码之后，会弹出提示输入密码。
            </p>
        </div>

        <div id="codeModal" class="reveal-modal">
            <h1>AIR-PORTAL-ALERT</h1>
            <hr>
            <a class="close-reveal-modal" id="codeModalClose">&#215;</a>
            <div style="padding-top: 20px;padding-bottom: 64px;line-height:35px;">
                <h4></h4>
                <span style="font-family: 华文新魏;font-size: 22px;">您的文件已经上传完成</span><br>
                &emsp;&emsp;&emsp;<span style="font-family: 华文新魏;font-size: 22px;">文件码为：</span>
                <span style="font-family: fantasy;font-size: 22px;" id="file_code">123456</span>
                <span style="font-family: 华文新魏;font-size: 22px;">，避免遗漏，请注意记录噢！</span>
            </div>
            <hr>
            <p style="font-size: 12px;">
                blog.mzywucai.club
            </p>
        </div>

        <div id="finishModal" class="reveal-modal">
            <h1>AIR-PORTAL-ALERT</h1>
            <hr>
            <a class="close-reveal-modal" id="finishModalClose">&#215;</a>
            <div style="padding-top: 20px;padding-bottom: 64px;line-height:35px;">
                <h4></h4>
                <span style="font-family: 华文新魏;font-size: 22px;">您的文件已经开始下载</span><br>
                &emsp;&emsp;&emsp;<span style="font-family: 华文新魏;font-size: 22px;">此文件码为：</span>
                <span style="font-family: fantasy;font-size: 22px;" id="file_code_finish">123456</span>
                <span style="font-family: 华文新魏;font-size: 22px;">，感谢您的使用！</span>
            </div>
            <hr>
            <p style="font-size: 12px;">
                blog.mzywucai.club
            </p>
        </div>

        <div id="recentModal" class="reveal-modal">
            <h1>AIR-PORTAL-ALERT</h1>
            <hr>
            <a class="close-reveal-modal" id="recentModalClose">&#215;</a>
            <div style="padding-top: 20px;padding-bottom: 64px;line-height:35px;">
                <h4></h4>
                <span style="font-family: 华文新魏;font-size: 22px;">您最近上传的文件</span><br>
                &emsp;&emsp;&emsp;<span style="font-family: 华文新魏;font-size: 22px;">文件码为：</span>
                <span style="font-family: fantasy;font-size: 22px;text-align: center;" id="fileCodeList">
                    <br>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;123456
                    <br>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;123456
                    <br>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;123456
                    <br>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;123456
                    <br>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;123456
                </span>
                <span style="font-family: 华文新魏;font-size: 22px;"><br>&emsp;&emsp;&emsp;以上最多保留显示最近五个文件码，从上往下依次为最近上传的，
                    感谢您的使用！</span>
            </div>
            <hr>
            <p style="font-size: 12px;">
                blog.mzywucai.club
            </p>
        </div>

    </div>
    <!-- my-container结束 -->

    <!-- 直接src回车 -->
    <script src="lib/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="lib/simple-alert/dist/notyf.min.js" type="text/javascript"></script>

    <script src="js/sending.js" type="text/javascript"></script>
    <script src="js/reception.js" type="text/javascript"></script>
    <script src="js/recentCode.js" type="text/javascript"></script>

    <!-- 依赖于jquery，放在jquery后面 -->
    <!--<script src="lib/bootstrap-3.3.7/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>-->
    <script src="js/air-portal.js" type="text/javascript"></script>
    <script src="js/limit.js" type="text/javascript"></script>




    <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
    <script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
    <script type="text/javascript">
        /*$("#revealLink").click();*/

        (function($) {
            function getRandomInt(min, max) {
                return Math.floor(Math.random() * (max - min + 1)) + min;
            }
            $.fn.animChars = function(options) {
                var params = $.extend(
                    {
                        duration: 1,
                        upperLimit: 150,
                        sizeInterval: [15, 80]
                    },
                    options
                );
                $(this).keypress(function(e) {
                    // console.log(this.selectionStart)
                    var rand = getRandomInt(1, 9);
                    var randP = Math.floor(Math.random() * 10);
                    randP < 5 ? (randP = rand) : (randP = rand - rand * 2);

                    var c = String.fromCharCode(e.which);
                    $(this).parent().append("<span class='cl" + rand + "'>" + c + "</span>");

                    $(this)
                        .parent()
                        .find("span.cl" + rand + "")
                        .css({
                            left: getRandomInt(0, 90) + "%",
                            "font-size": getRandomInt(
                                params.sizeInterval[0],
                                params.sizeInterval[1]
                            )
                        })
                        .fadeIn(100, function() {
                            $(this)
                                .css({
                                    "margin-bottom": getRandomInt(
                                        params.upperLimit - params.upperLimit / 2
                                            ? params.upperLimit / 2
                                            : 0,
                                        params.upperLimit
                                    ),
                                    "margin-left": randP * 10
                                })
                                .fadeOut(params.duration * 1000, function() {
                                    $(this).remove();
                                });
                        });
                });
            };
        })(jQuery);

        $(document).ready(function() {
            $(".receive-input").animChars({
                duration: 0.8,
                upperLimit: 200,
                sizeInterval: [15, 80]
            });
        });
    </script>
</body>
</html>